﻿@namespace AntDesign.Pro.Pages.Account.Center
@page "/account/center"

<GridContent>
    <Row Gutter="24">
        <AntDesign.Col Span="7">
            <Card Style="margin-bottom: 24px;">
                <div class="avatarHolder">
                    <img alt="" src="@currentUser.Avatar" />
                    <div className="name">@currentUser.Name</div>
                    <div>@currentUser.Signature</div>
                </div>

                <div className={styles.detail}>
                    <p>
                        <Icon Type="contacts" Theme="outline" Style="margin-right:8px;" />
                        @currentUser.Title
                    </p>
                    <p>
                        <Icon Type="cluster" Theme="outline" Style="margin-right:8px;" />
                        @currentUser.Group
                    </p>
                    <p>
                        <Icon Type="home" Theme="outline" Style="margin-right:8px;" />
                        <!--todo: add userinfo-->
                        @currentUser.Geographic
                    </p>
                </div>

                <Divider Dashed />

                <div class="tags">
                    <div class="tagsTitle">标签</div>
                    @foreach (var item in lstTags)
                    {
                        <Tag>@item</Tag>
                    }

                </div>

                <Divider Dashed Style="margin-top: 16px;" />
                
                <div class="team">
                    <div class="teamTitle">团队</div>
                    <!--todo: add notice-->
                </div>
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Span="17">
            <Card Class="tabsCard">
                <Body>
                    <Tabs DefaultActiveKey="1">
                        <TabPane Key="1">
                            <Tab>文章</Tab>
                            <ChildContent><Articles /></ChildContent>
                        </TabPane>
                        <TabPane Key="2">
                            <Tab>应用</Tab>
                            <ChildContent>Content of Tab Pane 2</ChildContent>
                        </TabPane>
                        <TabPane Key="3">
                            <Tab>项目</Tab>
                            <ChildContent>Content of Tab Pane 3</ChildContent>
                        </TabPane>
                    </Tabs>
                </Body>
            </Card>
        </AntDesign.Col>
    </Row>
</GridContent>

@code
{
    public class CurrentUser
    {
        public string Name { get; set; }
        public string Avatar { get; set; }
        public string Signature { get; set; }
        public string Title { get; set; }
        public string Group { get; set; }
        public string Geographic { get; set; }
    }

    private CurrentUser currentUser = new CurrentUser
    {
        Avatar = "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png",
        Name = "Serati Ma",
        Signature = "海纳百川，有容乃大",
        Title = "交互专家",
        Group = "蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED",
        Geographic = "浙江省杭州市"
    };
    private bool inputVisible = false;
    private string inputValue = string.Empty;

    private string[] lstTags = new string[]
    {
        "很有想法的",
        "专注设计",
        "辣~",
        "大长腿",
        "川妹子",
        "海纳百川"
    };

    private void ShowInput()
    {

    }
}
